import React, { useState, useEffect, useRef } from 'react';
import './Shouy.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { useSelector } from "react-redux";

const Index = () => {
    let [list, setlist] = useState([])
    let navigate = useNavigate()
    let name = useSelector((store) => store.list)
    const getlist = async () => {
        let { data } = await axios.get('http://localhost:3000/lyl/getuse?id=' +name[0]._id)
        setlist(data.date)
        console.log(data.date);
    }
    let touref = useRef()
    let diref = useRef()
    useEffect(() => {
        if (!touref) return
        let toushi = touref.current
        toushi.style.animation = 'tou 1s 1'
        if (!diref) return
        let dishi = diref.current
        dishi.style.animation = 'wei 1s 1'
        getlist()
    }, [])
    const tiaoz = (item) => {
        // console.log(item.juese.length);
        // navigate('/liao', { state: { item } })
        // if(item.juese.length == 1){
        //     navigate('/liao', { state: { item } })
        // }else{
        //     navigate('/qliao', { state: { item } })
        // }
        navigate('/qliao', { state: { item } })
    }
    return <div className='shouye_1'>
        <div className='shou_1'>
            <div className='shou_1_1'>
                <span>消息中心</span>
            </div>
            <div className='shou_1_2'>
                <span><img src={require('./public/刷子.png')} /></span>
                <span><img src={require('./public/设置.png')} /></span>
            </div>
        </div>
        <div className='shou_2' ref={touref}>
            <div className='shou_2_1'>
                <div className='shou_2_1_1'>
                    <img src={require('./public/系统通知.png')} width='50px' />
                </div>
                <div className='shou_2_1_2'>
                    <p>系统通知</p>
                    <span>你发起的3月27日20:00一起跑已招募结束</span>
                </div>
            </div>
            <div className='shou_2_2'>
                <div className='shou_2_1_1'>
                    <img src={require('./public/互动消息.png')} width='55px' />
                </div>
                <div className='shou_2_1_2'>
                    <p>互动消息</p>
                    <span>@花琉璃5566评论了你的内容</span>
                </div>
            </div>
        </div>
        <div className='shou_3' ref={diref}>
            <span className='shou_3_3'>私信消息</span>
            {list.map((item, index) => {
                return (
                    <div className='shou_3_1' onClick={() => tiaoz(item)} key={index}>
                        <div className='shou_2_1_1'>
                            <img src={item.usertu} width='55px' borderRadius='50%' />
                        </div>
                        <div className='shou_2_1_2'>
                            <p>{item.usename}</p>
                            <span>@花琉璃5566评论了你的内容</span>
                        </div>
                    </div>)
            })}



        </div>
    </div>;
}


export default Index;